<template>
  <div class="home-search">
    <van-popup :overlay="false" duration="0.2" v-model="show">
      <div ref="container" class="dom">
        <van-sticky>
          <van-search v-model="searchInput" @search="() => {}" id="home-search" :show-action="true" maxlength='25'
            shape="round" :placeholder="searchdefault">
            <template #left>
              <van-icon @click="() => {show = !show}" size="1.2rem" style="margin-right: 12px;" name="arrow-left" />
            </template>
            <template #action>
              <div @click="go_goods">搜索</div>
            </template>
          </van-search>
        </van-sticky>
        <van-list v-if="showcomm === 1">
          <van-row>
            <van-col span="12">
              <van-button id="jiageon" class="ahead" @click="jiage(0)" style="color: #FF5000;" type="default">
                价格升序</van-button>
            </van-col>
            <van-col span="12">
              <van-button id="jiagedo" class="ahead" @click="jiage(1)" style="color: #666;" type="default">
                价格降序</van-button>
            </van-col>
          </van-row>
          <div style="background-color: transparent;margin-left: 3.2vw;margin-right: 2.5vw;">
            <van-row type="flex" justify="space-around" gutter='9'>
              <van-col v-for="(item, index) in goodsitem" :key="index" span="12">
                <div @click="gotoinfo(item.id)" class="goods">
                  <van-image radius="10px 10px 0 0" height="45.6vw" fit="cover" :src="item.img" />
                  <div class="goods-item">
                    <div>
                      <span class="van-multi-ellipsis--l2" style="color: black;font-size: 3.46666vw;"
                        v-text="item.name"></span>
                    </div>
                    <div style="margin-top: 3%;">
                      <span>火速抢购</span>
                      <span style="color: red;">￥<span style="font-size: 4.2666vw;font-weight: 700;"
                          v-text="item.selling_price"></span></span>
                    </div>
                    <div>
                      <span>原价</span>
                      <span style="margin-right: 5%;text-decoration:line-through" v-text="item.original_price"></span>
                    </div>
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
        <van-list v-else-if="showcomm === 2">
          <van-cell @click="go_goods" v-for="(item, index) in goodsitem" :key="index" icon="search">
            <template #title>
              <span v-text="searchInputgao(item.name, 0)"></span>
              <span style="color: coral;" v-text="searchInput"></span>
              <span v-text="searchInputgao(item.name, 1)"></span>
            </template>
          </van-cell>
        </van-list>
        <van-list v-else>
          <b style="margin-left: 0.625rem;">大家都在搜</b>
          <van-row>
            <van-col v-for="(item, index) in searchhot" :key="index" span="12">
              <van-cell @click="setInput(item.name)" :title="item.name" />
            </van-col>
          </van-row>
        </van-list>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import router from '@/router'
  export default {
    name: 'seArch',
    props: ['searchdefault', 'searchhot', 'showSearch'],
    data() {
      return {
        show: false,
        searchInput: '',
        showcomm: 0,
        goodsitem: []
      }
    },
    methods: {
      gotoinfo(id) {
        router.push({
          path: '/Details/' + id
        })
      },
      setInput(s) {
        this.searchInput = s
      },
      go_goods() {
        if (this.searchInput) {
          if (this.goodsitem.length) {
            this.showcomm = 1
          } else {
            setTimeout(() => {
              if (this.goodsitem.length) {
                this.showcomm = 1
              }
            }, 1000)
          }
        } else {
          this.$api.homeData.goods_getinfo(this.searchdefault).then(res => {
            this.goodsitem = res.data
            this.searchInput = this.searchdefault
            this.showcomm = 1
          })
        }
      },
      jiage(n) {
        if (n === 1 && document.getElementById('jiagedo').style.color === 'rgb(102, 102, 102)') {
          document.getElementById('jiagedo').setAttribute('style', 'color: #ff5000;')
          document.getElementById('jiageon').setAttribute('style', 'color: #666;')
          this.goodsitem.reverse()
        }
        if (n === 0 && document.getElementById('jiageon').style.color === 'rgb(102, 102, 102)') {
          document.getElementById('jiageon').setAttribute('style', 'color: #ff5000;')
          document.getElementById('jiagedo').setAttribute('style', 'color: #666;')
          this.goodsitem.reverse()
        }
      },
      searchInputgao(name, num) {
        return name.split(this.searchInput)[num]
      }
    },
    watch: {
      showSearch() {
        this.show = !this.show
        setTimeout(() => {
          document.getElementById('home-search').focus()
          this.showcomm = 0
        }, 100)
      },
      searchInput() {
        if (this.searchInput) {
          this.$api.homeData.goods_getinfo(this.searchInput).then(res => {
            this.goodsitem = res.data
            this.showcomm = 2
          })
        } else {
          this.showcomm = 0
        }
      }
    }
  }
</script>

<style>
  .dom {
    width: 100vw;
    min-height: 100vh;
    border-left: 0.0625rem solid white;
  }

  .goods {
    width: 45.6vw;
    margin-bottom: 10px;
  }

  .goods-item {
    background-color: white;
    border-radius: 0 0 10px 10px;
    padding-left: .5625rem;
    padding-top: .1875rem;
    color: #999;
    font-size: 3.1999vw;
  }

  .ahead {
    width: 100%;
    color: #666;
  }
</style>
